<template>
    <div>
        <Modal v-model="modal" class="modal-full" title="导入明细" width=1200>
            <div v-if="modalShow">
                <Row>
                    <Col :span="6">
                    <Select-Panel :data="entityData" title="数据实体" @selectChange="entityChange">
                        <template slot="option" slot-scope="data">
                            <div class="ds-option">
                                {{data.item.TABLE_NAME}}
                                <span class="type-code">
                                    {{data.item.TABLE_TYPE}}
                                </span>
                            </div>
                        </template>
                    </Select-Panel>
                    </Col>
                    <Col :span="18" class="ds-data-view">
                    <Tabs @on-click="tabClick" v-model="tabOn">
                        <Tab-pane name="entity" label="实体结构">
                            <div v-if="entityIndex===null">请先选择实体</div>
                            <Data-table v-else :ref="'table-1'" :model="structModel" :data="structData" :hasCheck="false"></Data-table>
                        </Tab-pane>
                        <Tab-pane name="sample" label="数据样本">
                            <div v-if="entityIndex===null">请先选择实体</div>
                            <grid-panel v-if="sampleLoad && entityIndex!==null" ref="sampleTable" :hasSearch="false"  :hasAction="false" :model="sampleModel" :hasCheck="false"></grid-panel>
                        </Tab-pane>
                    </Tabs>
                    </Col>
                </Row>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="actionSubmit" type="primary">确认</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import Base from '../modalBase'
import DataTable from '@/components/gridTableSample'
import gridPanel from '@/node/gridPanel'
import SelectPanel from '@/components/selectPanel'
import { link } from '@/common'
import $ from '@/common/string'
//测试用model
export default {
    extends: Base,
    props: {
        markList: {}
    },
    data() {
        return {
            tabOn: 'entity',
            model: {},
            structModel: {
                fields: []
            },
            modal: false,
            sampleLoad: false,
            entityData: [],
            structData: [],
            sampleModel: [],
            tabIsLoad: [true],
            entityIndex: null,
            path: {
                entity: '/service/{app}/pf/rdb/entities/{code}',
                struct: '/service/{app}/pf/rdb/entity/struct/{ds_code}/{entity_code}',
                sample: 'service/{app}/pf/rdb/data/{ds_code}/{entity_code}'
            }
        }
    },
    watch: {
    },
    created() {
        //临时设置，根据根据action设置查询路径
        this.model = JSON.parse(JSON.stringify(this.model))
        this.model.path = this.actionModel.path
    },
    methods: {
        load() {
            link(this.path.entity, {}, {
                param: this.actionData
            }).then((res) => {
                this.entityData = res.data
            })
        },
        entityChange(entityIndex) {
            this.entityIndex = entityIndex
            link(this.path.struct, {}, {
                param: {
                    ds_code: this.actionData.code,
                    entity_code: this.entityData[entityIndex].TABLE_NAME
                }
            }).then((res) => {
                this.tabOn = 'entity'
                this.sampleLoad = false
                if (res.data && res.data[0]) {
                    this.structModel.fields = []
                    this.sampleModel.fields = []
                    for (let i in res.data) {
                        let field = res.data[i]
                        this.sampleModel.fields.push(field)
                    }
                    for (let i in res.data[0]) {
                        this.structModel.fields.push({
                            code: i,
                            name: i,
                            type: 'code'
                        })
                    }
                }
                this.sampleModel.path = $.composePath(this.path.sample, {
                    ds_code: this.actionData.code,
                    entity_code: this.entityData[entityIndex].TABLE_NAME
                })
                this.$set(this, 'structData', res.data)
            })
        },
        tabClick: function(index) {
            if (index === 'sample') {
                this.sampleLoad = true
                this.$refs.sampleTable && this.$refs.sampleTable.update()
            }
        },
        close() {
            this.modal = false
        },
        getPostData() {
            var data = {}
            for (var i in this.tableGroup) {
                var table = this.$refs['table-' + i]
                if (table && table.length) {
                    data[this.tableGroup[i].code] = table[0].markData
                }
            }
            return data
        },
        actionSubmit() {
            link(this.model.path, this.getPostData()).then((res) => {
                this.$parent.actionSuccess();
                this.close()
            })
        }
    },
    components: {
        gridPanel,
        SelectPanel,
        DataTable
    }
}
</script>

<style lang="less">
.modal-full .ivu-card-body .list-wrapper {
    max-height: 80vh;
    overflow:auto;
}
.ds-data-view {
    padding-left: 32px;
}

.ds-option {
    word-break: break-word;
    .type-code {
        color: #c1c1c1;
        float: right;
    }
}
</style>
